<template>
  <div class="points">
    <div class="points_top">
      <span>止盈止损点数设置</span>
      <div>
        <button class="closecss" @click="close">×</button>
      </div>
    </div>
    <div class="points_center">
      <div class="points_left">
        <div class="left_top">
          <div>
            <li>合约</li>
            <li>方向</li>
            <li>止损点数</li>
            <li>止盈点数</li>
            <li>状态</li>
          </div>
          <div :class="activeClass == index ? 'active':''" v-for="(item,index) in orderlist" :key="index" @click="getItem(index,item)">
            <li>{{item.symbol}}</li>
            <li>{{item.fall_rise=='rise'?'买':'卖'}}</li>
            <li>{{item.stop_profit_point}}</li>
            <li>{{item.stop_loss_point}}</li>
            <li>{{item.status==0?'运行':'停止'}}</li>
          </div>
        </div>
      </div>
      <div class="points_right">
        <div class="right_content">
          <div class="content">
            <p>合约代码 </p>
            <select v-model="param.symbol">
              <option :value="item.name_code" v-for="(item, index) in optiontab" :key="index">{{item.name_code}}</option>
            </select>
          </div>
          <div class="content">
            <p>方向</p>
            <select v-model="param.fall_rise">
              <option :value="item.id" v-for="(item, index) in pricelist2" :key="index">{{item.name}}</option>
            </select>
          </div>
          <div class="content">
            <p>止盈点数</p>
            <input type="number" v-model="param.stop_profit_point" value="1" min="1">
          </div>
          <div class="content">
            <p>止损点数</p>
            <input type="number" v-model="param.stop_loss_point" value="1" min="1">
          </div>
          <div class="content">
            <p>状态</p>
            <select v-model="param.status">
              <option :value="item.id" v-for="(item, index) in pricelist3" :key="index">{{item.name}}</option>
            </select>
          </div>
          <div class="right_button">
            <button @click="subpoints()" v-if="show">提交</button>
            <button @click="modify()" v-if="!show">修改</button>
            <button @click="deletes()">删除</button>
          </div>
        </div>
      </div>
    </div>
    <div class="points_footer">
      <button @click="close">确定</button>
      <button @click="close">取消</button>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  export default {
    computed: mapState({
      select: state => state.trade.select /* 当前选中股指 */,
      symbol: state => state.trade.symbol /* 全部行情 */,
      symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
      ticket: state => state.trade.ticket, /* 推送数据 */
      optionlist: state => state.trade.optionlist /* 全部合约代码 */
    }),
    watch:{

    },
    props: ['messbind'],
    data() {
      return {
        show: true,
        //列表
        orderlist: [],
        optiontab:[],/* 下拉框选择 */
        alertborder: true,
        param: {
          symbol: "", //产品coed值
          fall_rise: "1", //1买2卖
          stop_profit_point: "1", //止盈价
          stop_loss_point: "1", //止损价
          status: "0" //0生效1停止
        },
        activeClass: 0,
        pricelist2: [{
            name: "买",
            id: "rise"
          },
          {
            name: "卖",
            id: "fall"
          }
        ],
        pricelist3: [{
            name: "生效",
            id: "0"
          },
          {
            name: "停止",
            id: "1"
          }
        ],
      };
    },
    mounted() {
      this.orderlists()
      this.optiontab = this.optionlist;
    },
    methods: {
      orderlists() {
        this.$get('addons/tf-futures/loss-set/losslist').then(res => {
          if (res.code == 200) {
            // if (res.data.length == 0) {
            //   this.$notify.error('暂无信息！');
            // }
            this.orderlist = res.data;
          } else {
			console.log(res.message || '暂无信息');
          }
        })
      },
      getsss() {
        this.$set(this.p, 'b', 2)
      },
      //关闭模块
      close() {
        this.alertborder = !this.alertborder;
        this.$store.commit('set', {
          alertborder: this.alertborder
        });
      },
      //选中的哪一行数据
      getItem(index, item) {
        this.activeClass = index
        this.param = item
        this.show = !this.show//控制提交与修改的按钮
      },
      getcode() {
        var that = this;

      },
      //提交点数设置
      subpoints() {
		  if (that.param.symbol == '') {
		    return that.$notify.error('请选择合约代码！');
		  }
		  if (that.param.stop_profit_point == '') {
		    return that.$notify.error('请输入止盈价格！');
		  }
		  if (that.param.stop_loss_point == '') {
		    return that.$notify.error('请输入止损价格！');
		  }
        this.$post('addons/tf-futures/loss-set/loss-add', this.param).then(res => {
          if (res.code == 200) {
             this.$notify.success(res.message);
             this.orderlists()
          }else{
            this.$notify.success(res.message);
          }
        })

      },
      //修改
      modify() {
        this.$post('addons/tf-futures/loss-set/loss-update', this.param).then(res => {
          if (res.code == 200) {
             this.$notify.success(res.message);
             this.orderlists()
          }else{
            this.$notify.success(res.message);
          }
        })
      },
      //删除单个点数设置
      deletes() {
          this.$get('addons/tf-futures/loss-set/loss-delete',this.param).then(res=>{
          if(res.code == 200){
              this.$notify.success(res.message);
              this.orderlists()
          }else{
            this.$notify.success(res.message);
          }
        })
      }
    }
  };
</script>

<style scoped>
  li {
    list-style-type: none;
  }
  .closecss{
    margin: 0;
    padding: 0;
    border: 0;
    background: #B9D1EA;
    width: 10px;
  }
  .points {
    width: 800px;
    height: 560px;
    background: #e8e8e8;
    margin: 160px auto;
    border: 2px solid #b9d1ea;
  }

  .points_top {
    width: 100%;
    height: 28px;
    background: #b9d1ea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .points_top span:first-child {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .points_top span:last-child {
    font-size: 24px;
  }

  .points_left {
    width: 60%;
    height: 85%;
    background: #fff;
    margin: 8px;
    border: 1px solid #aaa;
  }

  .points_right {
    width: 40%;
    height: 85%;
    border: 1px solid #aaa;
    margin: 8px;
    background: #fff;
  }

  .points_center {
    width: 100%;
    height: 100%;
    display: flex;
    margin-bottom: -64px;
  }

  .left_top div {
    width: 100%;
    height: 24px;

    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .left_top div:first-child {
    background: #ccc;
    color: #fff;
  }

  .left_top li {
    width: 96px;
    height: 100%;

    text-align: center;
  }

  .points_footer {
    width: 100%;
    height: 32px;

    border-top: 1px solid #a3bddc;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  button {
    width: 80px;
    height: 24px;
    margin: 0 16px;
    letter-spacing: 1px;
    border: none;
    border: 1px solid #aaa;
  }

  .right_content {
    width: 90%;
    height: 100%;
    margin: 0 auto;
  }

  .content {
    width: 100%;
    height: 48px;
    padding-top: 24px;
  }

  .content p {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .content select,
  .content input {
    width: 100%;
    height: 28px;
    margin-top: 4px;
    border-radius: 2px;
    background: #ccc;
    box-sizing: border-box;
  }

  .content input {
    padding-left: 6.4px;
  }

  .right_button {
    margin-top: 40px;
    margin-left: 12px;
  }

  .active {
    background-color: #5b91d2;
  }
</style>
